<template>
  <el-dialog
    :model-value="dialogVisible"
    :title="dialogTitle"
    width="600px"
    @close="handleClose"
  >
    <!-- 表单数据 -->
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-position="right"
      label-width="88px"
      style="width: 400px; margin-left: 50px"
    >
      <el-form-item label="图标">
        <upload-image
          @onSuccess="uploadIconSuccess"
          :iconUrl="form.icon ? `${$common.apiUrl + form.icon}` : null"
        />
      </el-form-item>
      <el-form-item label="父菜单ID" prop="parent_id">
        <el-input v-model="form.parent_id" disabled />
      </el-form-item>
      <el-form-item label="菜单编码" prop="code">
        <el-input v-model="form.code" clearable />
      </el-form-item>
      <el-form-item label="菜单名称" prop="name">
        <el-input v-model="form.name" clearable />
      </el-form-item>
      <el-form-item label="菜单路径" prop="path">
        <el-input v-model="form.path" clearable />
      </el-form-item>
      <el-form-item label="排序" prop="order_num">
        <el-input v-model="form.order_num" clearable />
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-select v-model="form.type" placeholder="请选择类型">
          <el-option label="mobile" value="mobile" />
          <el-option label="pc" value="pc" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否可编辑" prop="is_operate">
        <el-switch
          :active-value="1"
          :inactive-value="0"
          v-model="form.is_operate"
          :disabled="form.is_operate ? true : false"
        />
      </el-form-item>
      <el-form-item label="创建时间" prop="create_time">
        <el-input v-model="form.create_time" disabled />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" clearable />
      </el-form-item>
    </el-form>

    <!-- 底部按钮组 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup name="Dialog">
import { ref, watch } from 'vue'
import { addMenu, updateMenu } from '@/api/menu.js'
import { ElMessage } from 'element-plus'
import UploadImage from '@/components/UploadImage/index.vue'
import dayjs from 'dayjs'
import { apiUrl, isNull } from '@/utils/common.js'
import { useI18n } from 'vue-i18n'
const i18n = useI18n()

// 父组件传参
const props = defineProps({
  dialogTitle: {
    type: String,
    default: '',
    required: true
  },
  dialogTableValue: {
    type: Object,
    default: () => {}
  }
})

// 是否显示弹窗
const dialogVisible = ref(false)
const formRef = ref(null)
const form = ref({
  parent_id: 0,
  icon: null,
  code: null,
  name: null,
  path: null,
  order_num: 1,
  type: null,
  is_operate: 1,
  catalog_id: 0,
  create_time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
  remark: null,
  is_delete: 0
})
// const formAvatar = ref(null) // 选择后的文件
// const upAvatarFlag = ref(false) // 头像状态
// const avatarUrl = ref(null) // 头像上传成功后的地址
// 表单校验
const rules = ref({
  parent_id: [
    {
      required: true,
      message: '请检查父菜单ID',
      trigger: 'blur'
    }
  ],
  code: [
    {
      required: true,
      message: '请输入菜单编码',
      trigger: 'blur'
    }
  ],
  name: [
    {
      required: true,
      message: '请输入菜单名称',
      trigger: 'blur'
    }
  ],
  type: [
    {
      required: true,
      message: '请选择类型',
      trigger: 'blur'
    }
  ],
  order_num: [
    {
      required: true,
      message: '请输入排序',
      trigger: 'blur'
    }
  ]
})

const emits = defineEmits(['update:modelValue', 'initMenuList'])

// 关闭
const handleClose = () => {
  emits('update:modelValue', false)
}

// 监听表单数据
watch(
  () => props.dialogTableValue,
  () => {
    const formData = JSON.parse(JSON.stringify(props.dialogTableValue))
    if (props.dialogTitle === '新增同级菜单') {
      form.value.parent_id = formData.parent_id
    } else if (props.dialogTitle === '新增下级菜单') {
      console.log(formData.id, 'formData')
      form.value.parent_id = formData.id
    } else if (props.dialogTitle === '编辑菜单') {
      form.value = formData
    }
  },
  { deep: true, immediate: true }
)

// 上传图标成功
const uploadIconSuccess = (data) => {
  form.value.icon = data.file_url
  console.log(form.value, 'data')
}

// 确认
const handleConfirm = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      const res = ['新增父级菜单', '新增同级菜单', '新增下级菜单'].includes(
        props.dialogTitle
      )
        ? await addMenu(form.value)
        : await updateMenu(form.value)

      if (res.status === 0) {
        ElMessage.success(i18n.t('message.updeteSuccess'))
        emits('initMenuList')
        handleClose()
      } else {
        ElMessage.error('添加失败！')
      }
    } else {
      return false
    }
  })
}
</script>

<style lang="scss" scoped>
@import '../index.scss';
</style>

<style>
.el-overlay-dialog {
  overflow: hidden !important;
}
</style>
